.text-button {
  display: flex;
}

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}

.text-button {
  color: var(--action-primary-content-default) !important;
  text-decoration: none;
  cursor: pointer;
}

.text-button:hover {
  color: var(--action-primary-content-hover) !important;
  cursor: pointer;
}

.text-button:active {
  color: var(--action-primary-content-active) !important;
}

.text-button.selected {
  color: var(--action-primary-content-selected) !important;
}

.text-button:focus-visible {
  box-shadow: 0px 0px 0px 2px var(--focus-default);
}

.text-button.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.text-button::after {
  margin-left: calc(.5 * var(--base-spacing));
  vertical-align: bottom;
}

/* button with arrow */
.text-button.with-arrow::after {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.text-button.with-arrow::after {
  content: url("../../../../images/icon-buttons/arrow-down/light/default.svg");
}

.theme-dark .text-button.with-arrow::after {
  content: url("../../../../images/icon-buttons/arrow-down/dark/default.svg");
}

.text-button.with-arrow:hover::after {
  content: url("../../../../images/icon-buttons/arrow-down/light/hover.svg");
}

.theme-dark .text-button.with-arrow:hover::after {
  content: url("../../../../images/icon-buttons/arrow-down/dark/hover.svg");
}

.text-button.with-arrow.selected::after {
  content: url("../../../../images/icon-buttons/arrow-down/light/selected.svg");
}

.theme-dark .text-button.with-arrow.selected::after {
  content: url("../../../../images/icon-buttons/arrow-down/dark/selected.svg");
}

/* button with link */

#content .text-button.with-link {
  text-decoration: none;
  margin-bottom: calc(1 * var(--base-spacing));
  display: inline-block;
  border-bottom: none;
}

.text-button.with-link::after {
  content: url("../../../../images/icon-buttons/link/light/default.svg");
}

.theme-dark .text-button.with-link::after {
  content: url("../../../../images/icon-buttons/link/dark/default.svg");
}

.text-button.with-link:hover::after {
  content: url("../../../../images/icon-buttons/link/light/hover.svg");
}

.theme-dark .text-button.with-link:hover::after {
  content: url("../../../../images/icon-buttons/link/dark/hover.svg");
}

.text-button.with-link.selected::after {
  content: url("../../../../images/icon-buttons/link/light/selected.svg");
}

.theme-dark .text-button.with-link.selected::after {
  content: url("../../../../images/icon-buttons/link/dark/selected.svg");
}
